<template>
  <div class="mian">
    <div class="row">

      <el-card shadow="hover" class="cardItem">
        <!-- 小图标 -->
        <div><svg t="1666842449105" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="10843" width="50" height="60">
            <path
              d="M666.7 927.4H289.2c-24.7 0-44.7-20-44.7-44.7 0-24.7 20-44.7 44.7-44.7h377.4c59.9 0 81.3-52.6 81.3-101.9V361.3c0-24.7 20-44.7 44.7-44.7 24.7 0 44.7 20 44.7 44.7v374.8c0 112.7-70.2 191.3-170.6 191.3z"
              fill="#1296db" p-id="10844"></path>
            <path
              d="M235.4 778.8c-24.7 0-44.7-20-44.7-44.7V289.3c0-105.3 85.7-191 191-191h364.6c117.2 0 212.5 95.3 212.5 212.5v50.6c0 24.7-20 44.7-44.7 44.7H441.9c-24.7 0-44.7-20-44.7-44.7s20-44.7 44.7-44.7h427.6v-5.9c0-67.9-55.2-123.1-123.1-123.1H381.7c-56.1 0-101.7 45.6-101.7 101.7v444.8c0.1 24.6-19.9 44.6-44.6 44.6z"
              fill="#1296db" p-id="10845"></path>
            <path
              d="M441.6 406c-24.7 0-44.7-20-44.7-44.7v-50.6c0-43.8-23.6-84.7-61.6-106.7-21.4-12.3-28.7-39.7-16.3-61.1 12.3-21.4 39.7-28.7 61.1-16.3 65.5 37.9 106.2 108.4 106.2 184v50.6c0 24.8-20 44.8-44.7 44.8zM289.2 928.2c-123.6 0-224.1-100.5-224.1-224.1v-37.7c0-24.7 20-44.7 44.7-44.7h105.8c24.7 0 44.7 20 44.7 44.7s-20 44.7-44.7 44.7h-61c3.6 71.1 62.6 127.7 134.5 127.7 24.7 0 44.7 20 44.7 44.7 0.1 24.7-19.9 44.7-44.6 44.7zM643.5 564.2H380.8c-24.7 0-44.7-20-44.7-44.7 0-24.7 20-44.7 44.7-44.7h262.7c24.7 0 44.7 20 44.7 44.7 0 24.7-20 44.7-44.7 44.7zM493.4 711.1H380.8c-24.7 0-44.7-20-44.7-44.7s20-44.7 44.7-44.7h112.5c24.7 0 44.7 20 44.7 44.7s-20 44.7-44.6 44.7z"
              fill="#1296db" p-id="10846"></path>
          </svg></div>
        <div class="item2">
          <h4>文章总数</h4>
          <p>{{count.articleAllNum}}</p>
        </div>
      </el-card>

      <el-card shadow="hover" class="cardItem">
        <!-- 小图标 -->
        <div><svg t="1666844972078" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="14999" width="50" height="60">
            <path
              d="M716.8 122.092308c15.753846-3.938462 31.507692-3.938462 47.261538-3.938462 110.276923 0 196.923077 86.646154 196.923077 196.923077s-86.646154 196.923077-196.923077 196.923077c-35.446154 0-66.953846-7.876923-98.461538-27.569231 11.815385-7.876923 19.692308-19.692308 27.569231-27.569231 19.692308 11.815385 43.323077 15.753846 66.953846 15.753847 86.646154 0 157.538462-70.892308 157.538461-157.538462s-70.892308-157.538462-157.538461-157.538461c-7.876923 0-15.753846 0-23.630769 3.938461-3.938462-15.753846-11.815385-27.569231-19.692308-39.384615zM681.353846 590.769231c-70.892308-51.2-157.538462-78.769231-248.123077-78.769231-240.246154 0-433.230769 192.984615-433.230769 433.230769 0 27.569231 3.938462 55.138462 7.876923 78.769231h39.384615c-3.938462-23.630769-7.876923-51.2-7.876923-78.769231 0-216.615385 177.230769-393.846154 393.846154-393.846154 63.015385 0 118.153846 15.753846 173.292308 39.384616h74.830769zM886.153846 823.138462c-11.815385-11.815385-23.630769-11.815385-35.446154-11.815385l-15.753846-15.753846 23.630769-23.630769c11.815385 7.876923 27.569231 7.876923 43.323077 7.876923 51.2 0 90.584615-35.446154 90.584616-82.707693 0-7.876923 0-19.692308-3.938462-27.56923l-59.076923 55.138461-51.2-55.138461 55.138462-51.2c-11.815385-3.938462-19.692308-3.938462-31.507693-3.938462-51.2 0-90.584615 35.446154-90.584615 82.707692 0 15.753846 3.938462 27.569231 11.815385 39.384616l-23.63077 19.692307-74.830769-70.892307v-27.569231l-59.076923-35.446154-35.446154 39.384615 27.569231 59.076924 35.446154 3.938461 3.938461-3.938461 70.892308 66.953846-141.784615 122.092307s-3.938462 31.507692 7.876923 43.323077 43.323077 15.753846 43.323077 15.753846l133.907692-141.784615 11.815385 11.815385c-7.876923 15.753846-7.876923 31.507692 7.876923 47.261538l70.892307 70.892308c15.753846 15.753846 39.384615 15.753846 55.138462 0l7.876923-7.876923c15.753846-15.753846 15.753846-39.384615 0-55.138462l-78.769231-70.892307z"
              fill="#d81e06" p-id="15000"></path>
            <path
              d="M437.169231 39.384615c129.969231 0 236.307692 106.338462 236.307692 236.307693s-106.338462 236.307692-236.307692 236.307692-236.307692-106.338462-236.307693-236.307692 106.338462-236.307692 236.307693-236.307693m0-39.384615c-153.6 0-275.692308 122.092308-275.692308 275.692308s122.092308 275.692308 275.692308 275.692307 275.692308-122.092308 275.692307-275.692307-122.092308-275.692308-275.692307-275.692308z"
              fill="#d81e06" p-id="15001"></path>
          </svg></div>
        <div class="item2">
          <h4>管理个数</h4>
          <p>{{count.userAll}}</p>
        </div>
      </el-card>

      <el-card shadow="hover" class="cardItem">
        <!-- 小图标 -->
        <div><svg t="1666845160814" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="24637" width="50" height="60">
            <path
              d="M992 512c0-12-6-24-18-30l-108-60 108-60c12 0 18-12 18-30 0-12-6-24-18-30L530 68c-12-6-24-6-30 0L50 302c-12 6-18 18-18 30s6 24 18 30l108 60-108 60c-12 6-18 18-18 30s6 24 18 30l108 60-108 60c-12 0-18 12-18 30 0 12 6 24 18 30l444 234c6 0 12 6 18 6 6 0 12 0 18-6l444-234c12-6 18-18 18-30s-6-24-18-30l-108-60 108-60c12-6 18-18 18-30zM140 332L512 140 884 332 512 530 140 332z m744 360L512 884 140 692l90-48 264 138c6 0 12 6 18 6 6 0 12 0 18-6l264-138 90 48z m-372 18L140 512l90-48 264 138c6 0 12 6 18 6 6 0 12 0 18-6l264-138 90 48L512 710z"
              p-id="24638" fill="#2c2c2c"></path>
          </svg></div>
        <div class="item2">
          <h4>标签个数</h4>
          <p>{{count.LabelAllNum}}</p>
        </div>
      </el-card>
      <!-- 动态 -->
      <el-card shadow="hover" class="cardItem">
        <!-- 小图标 -->
        <div><svg t="1666879423359" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="5359" width="50" height="60">
            <path
              d="M113.834667 291.84v449.194667a29.013333 29.013333 0 0 0 28.842666 29.013333h252.928v90.453333l160.597334-90.453333h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333h-665.6a29.013333 29.013333 0 0 0-29.696 29.013333z"
              fill="#FFDEAD" p-id="5360"></path>
            <path
              d="M809.130667 262.826667h-665.6a29.013333 29.013333 0 0 0-28.842667 29.013333v40.106667a29.013333 29.013333 0 0 1 28.842667-29.013334h665.6a29.013333 29.013333 0 0 1 29.013333 29.013334V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333z"
              fill="#FFF3DB" p-id="5361"></path>
            <path
              d="M556.202667 770.048h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V362.837333s-59.733333 392.533333-724.309333 314.709334v63.488a29.013333 29.013333 0 0 0 28.842666 29.013333h253.098667v90.453333z"
              fill="#F2C182" p-id="5362"></path>
            <path
              d="M619.008 632.32l101.888-35.157333-131.754667-76.117334 29.866667 111.274667zM891.904 148.992a61.44 61.44 0 0 0-84.138667 22.528l-19.968 34.133333 106.666667 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-22.528-84.138667z"
              fill="#69BAF9" p-id="5363"></path>
            <path d="M775.338667 198.775467l131.669333 76.032-186.026667 322.218666-131.6864-76.032z" fill="#F7FBFF"
              p-id="5364"></path>
            <path
              d="M775.168 198.826667l-5.290667 9.216 59.221334 34.133333a34.133333 34.133333 0 0 1 12.458666 46.592l-139.946666 242.346667a34.133333 34.133333 0 0 1-46.762667 12.629333l-59.050667-34.133333-6.656 11.434666 88.746667 51.2L720.896 597.333333l186.026667-322.56z"
              fill="#D8E3F0" p-id="5365"></path>
            <path
              d="M616.448 622.592l2.56 9.728 101.888-35.157333-44.885333-25.941334-59.562667 51.370667zM891.904 148.992c-1.024 0-2.218667-0.853333-3.242667-1.536A61.610667 61.610667 0 0 1 887.466667 204.8l-19.968 34.133333-73.728-42.496-5.12 8.704 106.666666 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-23.381333-83.626667z"
              fill="#599ED4" p-id="5366"></path>
            <path
              d="M265.898667 417.621333H494.933333a17.066667 17.066667 0 1 0 0-34.133333H265.898667a17.066667 17.066667 0 1 0 0 34.133333zM265.898667 533.504H494.933333a17.066667 17.066667 0 0 0 0-34.133333H265.898667a17.066667 17.066667 0 0 0 0 34.133333z"
              fill="#3D3D63" p-id="5367"></path>
            <path
              d="M959.488 354.645333a99.84 99.84 0 0 0-23.722667-127.488 78.677333 78.677333 0 0 0-142.848-64.170666l-11.605333 20.138666a17.066667 17.066667 0 0 0-20.821333 7.168l-32.085334 55.466667H142.677333a46.250667 46.250667 0 0 0-45.909333 46.08v449.194667a46.08 46.08 0 0 0 45.909333 46.08h236.032v73.386666a17.066667 17.066667 0 0 0 8.362667 14.848 17.066667 17.066667 0 0 0 8.704 2.218667 17.066667 17.066667 0 0 0 8.362667-2.218667l156.672-88.234666h248.32a46.08 46.08 0 0 0 46.08-46.08V398.677333L921.6 283.306667a17.066667 17.066667 0 0 0-4.266667-21.504l1.877334-3.413334a65.365333 65.365333 0 0 1 10.410666 79.189334l-53.077333 91.989333a56.832 56.832 0 0 0 20.821333 77.653333 17.066667 17.066667 0 0 0 24.234667-6.314666 17.066667 17.066667 0 0 0-6.997333-23.04 23.04 23.04 0 0 1-8.362667-31.061334z m-138.410667 386.389334a11.946667 11.946667 0 0 1-11.946666 11.946666H556.202667a17.066667 17.066667 0 0 0-8.362667 2.218667l-134.997333 76.117333v-61.269333a17.066667 17.066667 0 0 0-17.066667-17.066667H142.677333a11.946667 11.946667 0 0 1-11.776-11.946666V291.84a11.946667 11.946667 0 0 1 11.776-11.946667h565.930667L574.464 512a17.066667 17.066667 0 0 0-1.706667 12.970667L597.333333 615.253333H265.898667a17.066667 17.066667 0 1 0 0 34.133334h352.938666a17.066667 17.066667 0 0 0 5.802667 0l102.4-35.328a17.066667 17.066667 0 0 0 9.216-7.509334l85.333333-147.968z m-204.8-184.661334l63.829334 36.864-49.322667 17.066667z m206.848-170.666666v1.365333l-108.373333 186.709333-102.4-59.050666L781.482667 221.866667l102.4 59.050666z m76.458667-161.28L887.466667 244.224l-76.970667-44.373333 11.264-19.797334a44.544 44.544 0 1 1 77.141333 44.544z"
              fill="#3D3D63" p-id="5368"></path>
          </svg></div>
        <div class="item2">
          <h4>动态个数</h4>
          <p>{{count.talkAll}}</p>
        </div>
      </el-card>

    </div>
    <!-- 圆形表 -->
    <lable-echarts />
    <!-- 游戏 -->
    <small-game></small-game>
  </div>
</template>

<script>
import LableEcharts from '@/components/homeMain/LableEcharts.vue'
import SmallGame from '@/components/homeMain/SmallGame.vue'
export default {
  components: { LableEcharts, SmallGame },
  data () {
    return {
      count: {}
    }
  },
  mounted () {
    this.$axios.get('/endIndex').then(res => {
      this.count = res.data
    })
  }
}
</script>

<style lang="scss" scoped>
.mian {
  position: relative;
  min-width: 1200px;
}

.cardItem {
  position: relative;
  width: 300px;
  overflow: hidden;
  margin-bottom: 20px;
  .item2 {
    position: absolute;
    top: 10px;
    right: 80px;
    height: 100%;
    color: #666;
    padding: 0;
    font-size: 20px;
    p {
      font-weight: 700;
    }
    h4 {
      margin: 10px 0;
    }
  }
}
.mian {
  min-width: 1000px;
  height: 1300px;
}
.row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>
